<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>散客消费结算</title>
<meta name="decorator" content="default" />
<style type="text/css">
</style>
<script type="text/javascript">
	function dropShopping() {
		// 自定义按钮
		global
				.confirm(
						"确定要取消本次消费，取消后，购物车将被清空？",
						function() {
							window.location.href = "${ctx}/cash/consume/nonmember/dropShopping";
						});//confirm

	}

	function validateInputForm() {
		$("#inputForm").validate({
			submitHandler : function(form) {
				var total = "${shoppingCart.payElement.totalPrice}";
				var content = "本次消费需实付现金 " + total + " 元 , " + "请确认是否付款？";
				// 自定义按钮
				global.confirm(content, function() {
					form.submit();
				});//confirm
			},
			focusInvalid : false,
			rules : {},
			errorContainer : "#messageBox",
			errorPlacement : function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox") || element.is(":radio")) {
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			},
			messages : {}
		});//validate
	}//validateInputForm

	$().ready(function() {
		validateInputForm();
	});
</script>
</head>
<body>
	<div class="container">
		<form:form id="inputForm" modelAttribute="shoppingCart"
			class="form-input" action="${ctx}/cash/consume/payNonmembers/commit"
			method="post">
			<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
			<input id="pageSize" name="pageSize" type="hidden"
				value="${page.pageSize}" />

			<div class="icon-buttons">
				<input type="button" data-inline="true" data-icon="back"
					onclick="return directOpenURL('${ctx}/cash/consume/nonmember')"
					data-iconpos="notext" value=" 返回" /> <input type="button"
					data-inline="true" data-icon="delete"
					onclick="return dropShopping()" data-iconpos="notext" value="取消消费" />
				<input type="submit" data-inline="true" data-icon="check"
					data-iconpos="notext" value="确认消费" />

			</div>

			<div>
				<h2 style="text-align: center;">消费明细确认</h2>
				<h3>消费汇总</h3>
				<form action="#" id="contentForm">
					<c:if test="${shoppingCart.payElement.totalProductPrice>0}">
						<label>产品合计零售价(元)：</label>
						<form:input path="payElement.realProductPrice" readonly="true" />
					</c:if>

                    <c:if test="${shoppingCart.payElement.totalCarePrice>0}">
							<label>护理合计零售价(元)：</label>
								 <form:input path="payElement.realCarePrice"
										readonly="true" /> 
						</c:if>
					 <label><strong>总计零售价(元)：</strong></label>
							 <form:input path="payElement.totalPrice"
									id="realTotalPrice" readonly="true" /> 
				</form>
			</div>
		</form:form>


		<c:if test="${ not empty shoppingCart.products}">
			<div data-role="collapsible" data-collapsed="false">
				<h4>购买产品</h4>
				<div class="middleCls">
					<table id="contentTable" data-role="table"
						class="ui-responsive table-stroke">
						<thead>
							<tr>
								<th colspan="4" style="text-align:center;">已选产品</th>
							</tr>
							<tr>
								<th>产品名称</th>
								<th>产品规格</th>
								<th>数量</th>
								<th>零售价</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${shoppingCart.products}" var="productCart">
								<c:if test="${productCart.storeProduct.product_type==0}">
									<tr>
										<td>${productCart.storeProduct.product.name}</td>
										<td>${productCart.storeProduct.product.spec}</td>
										<td>${productCart.count}</td>
										<td>${productCart.storeProduct.product.retail_price}</td>

									</tr>
								</c:if>
								<c:if test="${productCart.storeProduct.product_type==1}">
									<tr>
										<td>${productCart.storeProduct.storeSelfProduct.name}</td>
										<td>${productCart.storeProduct.storeSelfProduct.spec}</td>
										<td>${productCart.count}</td>
										<td>${productCart.storeProduct.storeSelfProduct.retail_price}</td>
									</tr>
								</c:if>
							</c:forEach>
						</tbody>
					</table>
					<hr />
				</div>
			</div>
		</c:if>
		<c:if test="${ not empty shoppingCart.cares}">
			<div data-role="collapsible" data-collapsed="false">
				<h4>手工护理</h4>
				<div class="middleCls">
					<table id="contentTable" data-role="table"
						class="ui-responsive table-stroke">
						<thead>
							<tr>
								<th colspan="4" style="text-align:center;">已选护理</th>
							</tr>
							<tr>
								<th>护理名称</th>
								<th>服务专员</th>
								<th>数量</th>
								<th>零售价</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${shoppingCart.cares}" var="careCart">
								<c:if test="${careCart.storeCare.care_type==0}">
									<tr>
										<td>${careCart.storeCare.care.name}</td>
										<td>${careCart.employee.name}</td>
										<td>${careCart.count}</td>
										<td>${careCart.singlePrice}</td>
									</tr>
								</c:if>
								<c:if test="${careCart.storeCare.care_type==1}">
									<tr>
										<td>${careCart.storeCare.storeSelfCare.name}</td>
										<td>${careCart.employee.name}</td>
										<td>${careCart.count}</td>
										<td>${careCart.singlePrice}</td>
									</tr>
								</c:if>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</c:if>
	</div>
</body>
</html>
